<template>
     <el-card class="box-card" style="height: 99.5%">
          <el-card style="height: 160px; border-radius: 0px">
            <template #header>
              <div class="card-header">
                <span>随机密码</span>
              </div>
            </template>
            <div>
                  您想生成多少位的随机密码：
                  <el-input v-model="urlParams.password_length" style="width: 150px" placeholder="请输入密码长度" />
                  <el-button type="primary" style="margin-left: 20px" @click="getPassword">生成密码</el-button>
                  <p><el-text tag="b">{{result}}</el-text></p>
            </div>
          </el-card>
             <div class="block text-center" style="margin-top: 20px;">
                <el-carousel height="300px">
                  <el-carousel-item v-for="(item, index) in carouselItems" :key="index">
                   <img :src="item.image" alt="carousel image" style="width: 100%; height: 300px;">
                  </el-carousel-item>
                </el-carousel>
              </div>
     </el-card>
</template>

<script>
    export default {
        name: "Password",
        data(){
            return{
                result: '',
                urlParams: {
                   password_length: 16,
                },
                data: '',
                carouselItems: [
                    {
                        image: 'https://img1.baidu.com/it/u=1166872916,2474132725&fm=253&fmt=auto&app=138&f=JPEG?w=698&h=493',
                    },
                    {
                        image: 'https://proxyimg.sucai999.com/preimg/DBC456/700/DBC456/149/bde4a1efe81d58015bce5274929c240.jpg?x-oss-process=image/resize,h_320',
                    },
                    {
                        image: 'https://proxyimg.sucai999.com/preimg/DBC456/700/DBC456/106/d5ccbcd1b3643fbe492283410d5e0d9.jpg?x-oss-process=image/resize,h_320',
                    },
                ]
            }
        },
        methods: {
            getPassword(){
                // 使用正则表达式确保输入的是数字
                const isNumber = /^\d+$/.test(this.urlParams.password_length);
                if (!isNumber) {
                    this.$message.error('请输入数字');
                    return;
                }

                // 校验数字是否大于50
                const numberValue = parseInt(this.urlParams.password_length, 10);
                if (numberValue > 50) {
                    this.$message.error('数字不能大于50');
                    return;
                }

               this.$http.get('/random_password/', {params: this.urlParams})
                .then(res => {
                    this.result = res.data.password;
                    this.$message.success('生成密码成功')
                })
                .catch((error)=>{
                 })
            },
        }
    }
</script>

<style scoped>
    .demonstration {
      color: var(--el-text-color-secondary);
    }

    .el-carousel__item h3 {
      color: #475669;
      opacity: 0.75;
      line-height: 150px;
      margin: 0;
      text-align: center;
    }

    .el-carousel__item:nth-child(2n) {
      background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n + 1) {
      background-color: #d3dce6;
    }
</style>